<template>
  <Tooltip placement="bottom">
    <template #title>
      <span>获取本页asin产品信息</span>
    </template>
    <Popconfirm
      title="确定要获取当前页的asin产品信息至本地吗?"
      ok-text="确定"
      cancel-text="算了"
      @confirm="confirm()"
    >
      <AmazonOutlined />
    </Popconfirm>
  </Tooltip>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  import { Tooltip } from 'ant-design-vue'
  import { AmazonOutlined } from '@ant-design/icons-vue'
  import { useI18n } from '/@/hooks/web/useI18n'
  import { useTableContext } from '../../hooks/useTableContext'
  import { message, Popconfirm } from 'ant-design-vue'
  import { AsinToProductApi } from '/@/api/demo/product'

  export default defineComponent({
    name: 'InfoSetting',
    components: {
      AmazonOutlined,
      Tooltip,
      Popconfirm,
    },
    setup() {
      const table = useTableContext()
      const { t } = useI18n()

      const confirm = () => {
        const data: { asin: string; domainId: number; has_info: number }[] = (table.getBindValues
          .value.dataSource || []) as { asin: string; domainId: number; has_info: number }[]

        const asins = data.filter((item) => item.has_info !== 1).map((item) => item.asin)
        if (asins.length > 0) {
          const domainId = data[0].domainId
          var params = {
            asins: asins,
            domainId: domainId,
          }
          table.setLoading(true)
          AsinToProductApi(params).then(
            () => {
              table.setLoading(false)
              table.reload()
              message.success('获取成功，请前往产品列表查看！')
            },
            (error) => {
              message.error(error)
            },
          )
        } else {
          message.error('当前页面暂无待获取产品信息的asin！')
        }
      }
      return { confirm, t }
    },
  })
</script>
